<link rel="import" href="../../../html/polymer.html">

<link rel="import" href="chrome://resources/cr_elements/cr_button/cr_button.html">
<link rel="import" href="chrome://resources/cr_elements/cr_input/cr_input.html">
<link rel="import" href="chrome://resources/cr_elements/cr_toggle/cr_toggle.html">
<link rel="import" href="chrome://resources/cr_elements/hidden_style_css.html">
<link rel="import" href="chrome://resources/cr_elements/md_select_css.html">
<link rel="import" href="chrome://resources/html/assert.html">
<link rel="import" href="chrome://resources/html/i18n_behavior.html">
<link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/iron-flex-layout-classes.html">
<link rel="import" href="cr_policy_network_behavior_mojo.html">
<link rel="import" href="network_proxy_exclusions.html">
<link rel="import" href="network_proxy_input.html">
<link rel="import" href="network_shared_css.html">
<link rel="import" href="onc_mojo.html">

<dom-module id="network-proxy">
  <template>
    <style include="network-shared cr-hidden-style iron-flex iron-flex-alignment md-select">
      network-proxy-input {
        margin-bottom: 10px;
      }

      network-proxy-exclusions {
        margin: 10px 0;
      }

      #addException {
        margin-top: 10px;
      }

      #manualProxy {
        padding-inline-start: var(--cr-section-padding);
      }

      #proxyType  {
        width: 320px;
      }

    </style>

    <!-- Proxy type dropdown -->
    <div class="property-box">
      <div class="start">[[i18n('networkProxyConnectionType')]]</div>
      <select id="proxyType" class="md-select" on-change="onTypeChange_"
          value="[[proxy_.type.activeValue]]"
          disabled="[[!isEditable_('type', managedProperties, editable,
              useSharedProxies)]]"
          aria-label="[[i18n('networkProxyConnectionType')]]">
        <template is="dom-repeat" items="[[proxyTypes_]]">
          <option value="[[item]]">[[getProxyTypeDesc_(item)]]</option>
        </template>
      </select>
    </div>

    <!-- Autoconfiguration (PAC) -->
    <div class="property-box indented"
        hidden$="[[!matches_(proxy_.type.activeValue, 'PAC')]]">
      <cr-input id="pacInput" class="flex"
          label="[[i18n('networkProxyAutoConfig')]]"
          value="{{proxy_.pac.activeValue}}" on-change="onPACChange_"
          disabled="[[!isEditable_('pac', managedProperties, editable,
              useSharedProxies)]]">
      </cr-input>
    </div>

    <!-- Web Proxy Auto Discovery (WPAD) -->
    <div class="property-box indented"
        hidden$="[[!matches_(proxy_.type.activeValue, 'WPAD')]]">
      <div>[[i18n('networkProxyWpad')]]</div>
      <div class="middle">[[wpad_]]</div>
    </div>

    <!-- Manual -->
    <div class="property-box indented"
        hidden$="[[!matches_(proxy_.type.activeValue, 'Manual')]]">
      <div id="networkProxyToggleLabel" class="flex">
        [[i18n('networkProxyUseSame')]]
      </div>
      <cr-toggle checked="{{useSameProxy_}}"
          disabled="[[!isEditable_('type', managedProperties, editable,
              useSharedProxies)]]"
          aria-labelledby="networkProxyToggleLabel">
      </cr-toggle>
    </div>

    <div id="manualProxy" class="layout vertical start"
        hidden$="[[!matches_(proxy_.type.activeValue, 'Manual')]]">
      <div hidden$="[[!useSameProxy_]]" class="layout vertical">
        <network-proxy-input
            id="sameProxyInput"
            on-proxy-input-change="onProxyInputChange_"
            editable="[[isEditable_('manual.httpProxy.host', managedProperties,
                editable, useSharedProxies)]]"
            value="{{proxy_.manual.httpProxy}}"
            label="[[i18n('networkProxy')]]">
        </network-proxy-input>
      </div>
      <div hidden$="[[useSameProxy_]]" class="layout vertical">
        <network-proxy-input
          id="httpProxyInput"
            on-proxy-input-change="onProxyInputChange_"
            editable="[[isEditable_('manual.httpProxy.host', managedProperties,
                editable, useSharedProxies)]]"
            value="{{proxy_.manual.httpProxy}}"
            label="[[i18n('networkProxyHttp')]]">
        </network-proxy-input>
        <network-proxy-input
            id="secureHttpProxyInput"
            on-proxy-input-change="onProxyInputChange_"
            editable="[[isEditable_('manual.secureHttpProxy.host',
                managedProperties, editable, useSharedProxies)]]"
            value="{{proxy_.manual.secureHttpProxy}}"
            label="[[i18n('networkProxyShttp')]]">
        </network-proxy-input>
        <network-proxy-input
            id="socksProxyInput"
            on-proxy-input-change="onProxyInputChange_"
            editable="[[isEditable_('manual.socks.host', managedProperties,
                editable, useSharedProxies)]]"
            value="{{proxy_.manual.socks}}"
            label="[[i18n('networkProxySocks')]]">
        </network-proxy-input>
      </div>

      <div hidden="[[!isEditable_('type', managedProperties, editable,
          useSharedProxies)]]">
        <div>[[i18n('networkProxyExceptionList')]]</div>
        <network-proxy-exclusions
            on-proxy-exclusions-change="onProxyExclusionsChange_"
            exclusions="{{proxy_.excludeDomains.activeValue}}"
            editable="[[isEditable_('excludeDomains', managedProperties,
                editable, useSharedProxies)]]">
        </network-proxy-exclusions>
        <div id="addException" class="layout horizontal center">
          <cr-input id="proxyExclusion" class="flex"
              value="{{proxyExclusionInputValue_}}"
              aria-label="[[i18n('networkProxyExceptionInputA11yLabel')]]"
              on-keypress="onAddProxyExclusionKeypress_">
            <cr-button id="proxyExclusionButton"
                on-click="onAddProxyExclusionTap_"
                slot="suffix"
                disabled="[[shouldProxyExclusionButtonBeDisabled_(
                    proxyExclusionInputValue_)]]">
              [[i18n('networkProxyAddException')]]
            </cr-button>
          </cr-input>
        </div>
      </div>

      <cr-button id="saveManualProxy"
          on-click="onSaveProxyTap_" class="action-button"
          disabled="[[!isSaveManualProxyEnabled_(managedProperties,
              proxyIsUserModified_, proxy_.*)]]">
        [[i18n('save')]]
      </cr-button>
    </div>

  </template>
  <script src="network_proxy.js"></script>
</dom-module>
